<template>
  <div id="home">
    <van-nav-bar fixed class="page_nav_bar">
      <template #title>
        <van-button class="search_btn" icon="search" type="primary" to="/search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 滑动标签  -->
    <van-tabs class="header_tabs" v-model="active" swipeable animated>
      <van-tab :title="item.name" v-for="item in channels" :key="item.id">
        <ArticleList :channelsId="item.id" />
      </van-tab>
      <template #nav-right>
        <div class="right_btn" @click="isShowEditPopup = true">
          <van-icon name="wap-nav" />
        </div>
        <div class="placeholder_box"></div>
      </template>
    </van-tabs>

    <van-popup
      v-model="isShowEditPopup"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '90%' }"
    >
      <ChannelEdit
        @updata_active="updata_active"
        :myChannels="channels"
        :activeIndex="active"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getUserChannels } from '@/api/user'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './components/ChannelEdit.vue'
import { getItem } from '@/utils/storage'
export default {
  data () {
    return {
      active: 0,
      channels: [],
      isShowEditPopup: false
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  created () {
    this.loadUserChannels()
  },
  // 定义方法
  methods: {
    async loadUserChannels () {
      try {
        const localChannel = getItem('HMTT-CHANNELS')
        if (!this.$store.state.user && localChannel) {
          this.channels = localChannel
        } else {
          const { data: res } = await getUserChannels()
          this.channels = res.data.channels
        }
      } catch (err) {
        Toast('错误')
      }
    },
    updata_active (val, isShow) {
      this.active = val
      this.isShowEditPopup = isShow
    }
  }
}
</script>

<style scoped lang="less">
#home {
  padding-top: 170px;
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
  .search_btn {
    width: 555px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 32px;
    border: 0;
    .van-icon-search {
      color: #fff;
    }
  }
  /deep/ .header_tabs {
    .van-tabs__wrap {
      position: fixed;
      top: 92px;
      width: 100%;
      height: 80px;
      z-index: 2;
      border-bottom: 1px solid #edeff3;
      .van-tabs__nav--line {
        padding: 0;
      }
    }
    .van-tab {
      width: 200px;
      border-left: 1px solid #edeff3;
      .van-tab__text {
        font-size: 28px;
        color: #777;
      }
    }
    .van-tab--active {
      .van-tab__text {
        font-size: 30px;
        color: #333;
      }
    }
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background: #3296fa;
      border-radius: 3px;
      bottom: 8px;
    }
  }
  .right_btn {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    width: 66px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.9);
    &::before {
      content: "";
      position: absolute;
      left: 0;
      width: 2px;
      height: 58px;
      background: url(~@/assets/gradient-gray-line.png);
      background-size: 100% 100%;
    }
  }
  .placeholder_box {
    width: 66px;
    flex-shrink: 0;
  }
}
</style>
